<template>
  <div>
    <h4>Parent Component</h4>
    <p>Car Name: {{ car.name }}</p>
    <p>Car Color: {{ car.color }}</p>
    <p>Car Year: {{ car.year }}</p>
    <p>Car Price: {{ car.price }}</p>
    <button class="btn" @click="handlePrice(1000)">Add 1000 to Price</button>
  </div>
  <h6>以下内容是子组件=====>>>></h6>
  <Child ref="refChild">
    <template #context>
      （具名插槽）父组件的汽车信息： {{ car }}
    </template>
    <template #list="{ data }">
      <li class="" v-for="(item, index) in data" :key="index">{{ item.name }}价格为: {{ item.price }}元</li>
    </template>
  </Child>
</template>

<script lang='ts' setup>
import { reactive } from 'vue';
import Child from './Child.vue';

const handlePrice = (newPrice: number): void => {
  car.price += newPrice;
}

const car = reactive({
  name: 'BMW',
  color: 'red',
  year: 2021,
  price: 100000
});


</script>

<style scoped lang='scss'></style>
